<!--
  This file is a part of the open-eBackup project.
  This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
  If a copy of the MPL was not distributed with this file, You can obtain one at
  http://mozilla.org/MPL/2.0/.
  
  Copyright (c) [2024] Huawei Technologies Co.,Ltd.
  
  THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
  EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
  MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
  -->

<div class="aui-operation" *ngIf="!componentData">
  <lv-group [lvGutter]="groupCommon.middleRowGutter">
    <button lvType="primary" lv-button (click)="addTargetCluster()" pmpermission pmOperation="AddingTargetCluster">
      {{ 'common_add_label' | i18n }}
    </button>
    <button lv-button (click)="deleteTargetCluster()" [disabled]="clusterSelection.length === 0" pmpermission
      pmOperation="DeletingTargetCluster">
      {{ 'common_delete_label' | i18n }}
    </button>
  </lv-group>
  <lv-group>
    <button class="aui-button-icon" lv-button lvSize="auto" (click)="refreshTargetCluster()">
      <i lv-icon="lv-icon-refresh" [lvColorState]="true"></i>
    </button>
  </lv-group>
</div>

<div class="list-container" *ngIf="!componentData">
  <lv-datatable [lvData]="clusterData" #lvTargetTable lvResize lvSelectionMode="multiple"
    [lvSelection]="clusterSelection" (lvSelectionChange)="selectionChange($event)" lvCompareWith="clusterId"
    lvResizeMode="expand" [lvScroll]="{ x: '100%' }">
    <thead>
      <tr>
        <th lvShowCheckbox width="40px" [lvRowsData]="lvTargetTable.renderData"></th>
        <th lvCellKey="clusterName" lvShowCustom>
          {{ 'common_name_label' | i18n }}
          <div lvCustom>
            <aui-custom-table-search (search)="searchByName($event)"
              filterTitle="{{ 'common_name_label' | i18n }}"></aui-custom-table-search>
          </div>
        </th>
        <th lvCellKey="roleList" lvShowFilter [(lvFilters)]="roleFilters" (lvFilterChange)="filterChange($event)"
          lvFilterCheckAll>
          {{ 'common_role_label' | i18n }}
        </th>
        <th lvCellKey="statusList" lvShowFilter [(lvFilters)]="statusFilters" (lvFilterChange)="filterChange($event)"
          lvFilterCheckAll>
          {{ 'common_status_label' | i18n }}
        </th>
        <th lvCellKey="capacitylist" width="300px" *ngIf="componentData">
          {{'common_capacity_label' | i18n }}
        </th>
        <th lvCellKey="ip" lvShowCustom>
          {{ 'common_ip_address_label' | i18n }}
          <div lvCustom>
            <aui-custom-table-search (search)="searchByIp($event)"
              filterTitle="{{ 'common_ip_address_label' | i18n }}"></aui-custom-table-search>
          </div>
        </th>
        <th lvCellKey="authUser" *ngIf="componentData">
          {{ 'system_authorized_user_label' | i18n }}
        </th>
        <th width='144px'>{{ 'common_operation_label' | i18n }}</th>
      </tr>
    </thead>
    <tbody>
      <ng-container *ngFor="let item of lvTargetTable.renderData;trackBy:trackByUuid">
        <tr *ngIf="!componentData && item.role === CLUSTER_ROLE.replication.value">
          <td lvShowCheckbox width="40px" [lvRowData]="item"></td>
          <td>
            <span lv-overflow *ngIf="item.clusterType === CLUSTER_TYPE.local.value"
              [ngClass]="{'aui-link': hasClusterDetailPermission}" (click)="localClusterDetail(item)"
              id="outerClosable">{{ item.clusterName }}</span>
            <span lv-overflow *ngIf="item.clusterType !== CLUSTER_TYPE.local.value">{{ item.clusterName }}</span>
          </td>
          <td>
            <ng-container *ngIf="item.role === 1">
              {{ 'system_cluster_role_replication_label' | i18n }}
            </ng-container>
          </td>
          <td>
            <aui-status [value]="item.status" type="Cluster_Status"></aui-status>
          </td>
          <td>
            <span *ngIf="item.clusterType !== CLUSTER_TYPE.local.value" lv-overflow>
              {{item.displayIps | nil}}
            </span>
          </td>
          <td>
            <ng-container *ngIf="item.clusterType !== CLUSTER_TYPE.local.value">
              <lv-operation-menu [lvItemsFn]="targetOptsCallback" [lvData]="item">
              </lv-operation-menu>
            </ng-container>
          </td>
          <ng-template #restIpTpl>
            <ng-container *ngFor="let ip of item.ipArr">
              {{ ip }}<br />
            </ng-container>
          </ng-template>
        </tr>
      </ng-container>
    </tbody>
  </lv-datatable>
  <div class="aui-paginator-wrap">
    <lv-paginator [lvPageSize]="pageSize" [lvTotal]="total" [lvPageIndex]="pageIndex"
      (lvPageChange)="clusterPageChange($event)" [lvPageSizeOptions]="sizeOptions" [hidden]="total < 10">
    </lv-paginator>
  </div>
</div>
<lv-collapse lvType="simple" *ngIf="componentData">
  <lv-collapse-panel [lvTitle]="titleTpl" lvExpanded="true" *ngIf="componentData">
    <div class="aui-operation">
      <lv-group [lvGutter]="groupCommon.middleRowGutter">
        <button lvType="primary" lv-button (click)="addTargetCluster()" pmpermission pmOperation="AddingTargetCluster">
          {{ 'common_add_label' | i18n }}
        </button>
        <button lv-button (click)="deleteTargetCluster()" [disabled]="clusterSelection.length === 0" pmpermission
          pmOperation="DeletingTargetCluster">
          {{ 'common_delete_label' | i18n }}
        </button>
      </lv-group>
      <lv-group>
        <button class="aui-button-icon" lv-button lvSize="auto" (click)="refreshTargetCluster()">
          <i lv-icon="lv-icon-refresh" [lvColorState]="true"></i>
        </button>
      </lv-group>
    </div>

    <div class="list-container">
      <lv-datatable [lvData]="clusterData" #lvTargetTable lvResize lvSelectionMode="multiple"
        [lvSelection]="clusterSelection" (lvSelectionChange)="selectionChange($event)" lvCompareWith="clusterId"
        lvResizeMode="expand" [lvScroll]="{ x: '100%' }">
        <thead>
          <tr>
            <th lvShowCheckbox width="40px" [lvRowsData]="lvTargetTable.renderData"></th>
            <th lvCellKey="clusterName" lvShowCustom>
              {{ 'common_name_label' | i18n }}
              <div lvCustom>
                <aui-custom-table-search (search)="searchByName($event)"
                  filterTitle="{{ 'common_name_label' | i18n }}"></aui-custom-table-search>
              </div>
            </th>
            <th lvCellKey="roleList" lvShowFilter [(lvFilters)]="roleFilters" (lvFilterChange)="filterChange($event)"
              lvFilterCheckAll>
              {{ 'common_role_label' | i18n }}
            </th>
            <th lvCellKey="statusList" lvShowFilter [(lvFilters)]="statusFilters"
              (lvFilterChange)="filterChange($event)" lvFilterCheckAll>
              {{ 'common_status_label' | i18n }}
            </th>
            <th lvCellKey="capacitylist" width="300px" *ngIf="componentData">
              {{'common_capacity_label' | i18n }}
            </th>
            <th lvCellKey="ip" lvShowCustom>
              {{ 'common_ip_address_label' | i18n }}
              <div lvCustom>
                <aui-custom-table-search (search)="searchByIp($event)"
                  filterTitle="{{ 'common_ip_address_label' | i18n }}"></aui-custom-table-search>
              </div>
            </th>
            <th lvCellKey="authUser" *ngIf="componentData">
              {{ 'system_authorized_user_label' | i18n }}
            </th>
            <th width='144px'>{{ 'common_operation_label' | i18n }}</th>
          </tr>
        </thead>
        <tbody>
          <ng-container *ngFor="let item of lvTargetTable.renderData;trackBy:trackByUuid">
            <tr *ngIf="componentData && item.role === CLUSTER_ROLE.managed.value">
              <td lvShowCheckbox width="40px" [lvRowData]="item">
              </td>
              <td>
                <span lv-overflow *ngIf="item.clusterType === CLUSTER_TYPE.local.value"
                  [ngClass]="{'aui-link': hasClusterDetailPermission}" (click)="localClusterDetail(item)"
                  id="outerClosable">{{ item.clusterName }}</span>
                <span lv-overflow *ngIf="item.clusterType !== CLUSTER_TYPE.local.value">{{ item.clusterName }}</span>
              </td>
              <td>
                <span *ngIf="item.role === 2 && !item.enableManage">
                  {{ 'system_cluster_role_managed_label' | i18n }}
                </span>
                <span *ngIf="item.role === 2 && item.enableManage">
                  {{ 'common_management_label' | i18n }}
                </span>
              </td>
              <td>
                <aui-status [value]="item.status" type="Cluster_Status"></aui-status>
              </td>
              <td width="300px">
                <div class='percent-bar'>
                  <lv-progress [lvValue]="item.sizePercent" [lvSize]="'small'" [lvColors]='progressBarColor'
                    [lvLabel]="progressLabelTpl" lvDecimals="3"></lv-progress>
                  <div class='size-percent'>
                    {{item.usedCapacity | capacityCalculateLabel:'1.1-3':unitconst.KB:
                    true}}/{{item.capacity | capacityCalculateLabel:'1.1-3':unitconst.KB:
                    true}}
                  </div>
                </div>
              </td>
              <td>
                <span>
                  <span *ngIf="item.displayIp" [lv-tooltip]="item.ipArr.length > 0 ? restIpTpl : null"
                    lvTooltipPosition="right">
                    {{ item.displayIp + '...' }}
                  </span>
                  <span *ngIf="!item.displayIp">
                    {{ item.ip }}
                  </span>
                </span>
              </td>
              <td>
                <span [ngClass]="{ 'aui-link': !!_size(item.authUserList) }" (click)="authorizedUser(item)">
                  {{ _size(item.authUserList) | nil }}
                </span>
              </td>
              <td>
                <ng-container *ngIf="item.role === CLUSTER_ROLE.managed.value">
                  <lv-operation-menu [lvItemsFn]="targetOptsCallback" [lvData]="item">
                  </lv-operation-menu>
                </ng-container>
              </td>
              <ng-template #restIpTpl>
                <ng-container *ngFor="let ip of item.ipArr">
                  {{ ip }}<br />
                </ng-container>
              </ng-template>
            </tr>
          </ng-container>
        </tbody>
      </lv-datatable>
    </div>
    <div class="aui-paginator-wrap">
      <lv-paginator [lvPageSize]="pageSize" [lvTotal]="total" [lvPageIndex]="pageIndex"
        (lvPageChange)="clusterPageChange($event)" [lvPageSizeOptions]="sizeOptions" [hidden]="total < 10">
      </lv-paginator>
    </div>
  </lv-collapse-panel>
</lv-collapse>

<ng-template #emptyTpl>
  --
</ng-template>

<ng-template #titleTpl>
  <lv-group>
    <ng-container *ngIf="i18n.isEn; else elseTemplate">
      <span class="custom-title">{{'system_multi_domain_cluster_label' | i18n}} ({{total}})</span>
    </ng-container>
    <ng-template #elseTemplate>
      <span class="custom-title">{{'system_multi_domain_cluster_label' | i18n}}({{total}})</span>
    </ng-template>
    <i lv-icon="aui-icon-help" lv-tooltip="{{'system_multi_domain_cluster_tip_label' | i18n}}" lvTooltipTheme="light"
      class="cluster-help" lvColorState='true'></i>
  </lv-group>
</ng-template>